---
# title: "Background Attachment"
title: "背景图像固定"
# description: "Utilities for controlling how a background image behaves when scrolling."
description: "用于控制背景图片在滚动时的表现的功能类。"
features:
  responsive: true
  customizable: false
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/backgroundAttachment'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Fixed

<!-- Use `bg-fixed` to fix the background image relative to the viewport. -->
使用 `bg-fixed` 来固定相对于视口的背景图片。

```html lightBlue
<template preview>
  <div class="w-full h-48 bg-fixed bg-contain bg-center overflow-y-scroll" style="background-image:url('/img/placeholder-light-blue.svg');">
    <div class="h-64"></div>
  </div>
</template>

<div class="**bg-fixed** ..." style="background-image: url(...)"></div>
```

## Local

<!-- Use `bg-local` to scroll the background image with the container and the viewport. -->
使用 `bg-local` 来滚动容器和视口的背景图片。

```html indigo
<template preview>
  <div class="w-full h-72 bg-local bg-cover bg-center overflow-y-scroll" style="background-image:url('/img/placeholder-indigo.svg');">
    <div class="h-96"></div>
  </div>
</template>

<div class="**bg-local** ..." style="background-image: url(...)"></div>
```

## Scroll

<!-- Use `bg-scroll` to scroll the background image with the viewport, but not with the container. -->
使用 `bg-scroll` 来滚动背景图片与视口，而不是容器。

```html fuchsia
<template preview>
  <div class="w-full h-72 bg-scroll bg-cover overflow-y-scroll" style="background-image:url('/img/placeholder-fuchsia.svg');">
    <div class="h-96"></div>
  </div>
</template>

<div class="**bg-scroll** ..." style="background-image: url(...)"></div>
```

<!-- ## Responsive -->
## 响应式 

<!-- To control the background attachment of an element at a specific breakpoint, add a `{screen}:` prefix to any existing background attachment utility. For example, use `md:bg-fixed` to apply the `bg-fixed` utility at only medium screen sizes and above. -->
要控制元素在特定断点处的 background attachment，请在任何现有的 background attachment 功能类中添加 `{screen}:` 前缀。例如，使用 `md:bg-fixed` 来应用 `bg-fixed` 功能类，只适用于中等尺寸以上的屏幕。

```html
<div class="bg-local **md:bg-fixed** ...">
  <!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)文档。

<!-- ## Customizing -->
## 自定义 

<!-- ### Variants -->
### 变体 

<Variants plugin="backgroundAttachment" />

<!-- ### Disabling -->
### 禁用 

<Disabling plugin="backgroundAttachment" />
